
<style>
	.recordIndex{
		width: 100%;
		height: 100%;
	}
	li{
		width: 100%;
		height: 200px;
	}
	.record-box{
		width: 100%;
		height: auto;
		display: flex;
		padding: 0 10px;
		box-sizing: border-box;
		flex-direction: column;
	}
	.record-box-tit{
		width: 100%;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
		display: flex;
	}
	.record-box-tit>span{
		flex: 1;
		display: inline-block;
	}
	.record-box-img{
		display:flex;
		flex-wrap:wrap;
	}
	.record-box-img>img{
		width: 50px;
		height: 50px;
		display: inline-block;
	}
	.record-box_text{
		height:75px;
		background-color:#f5f5f5;
		font-size:13px;
		overflow:auto;
		padding:5px;
	}
	.record-box_cart{
		padding:5px 0;
		display:flex;
		align-items:center;
		justify-content:flex-end;
		border-bottom:0.5px solid #e5e5e5;

	}
	.notMore{
		width: 100%;
		height: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		justify-content: center;
	}
	.notData{
	    width: 100%;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
        color: #999;
    	font-size: 14px;
	}
</style>

<template>
	<div class="accessory-list-wrap">
        <div class="accessory-list">
            <ul v-if="recordList && recordList.length>0">
                <li class="record-box" v-for="(item,index) in recordList" :key="index">
                	<div class="record-box-tit">
                		<span>维修记录{{item.maintenanceMileage}}公里</span>
                		<span style="text-align: right;">{{item.maintenanceDate}}</span>
                	</div>
                	<div class="record-box-img">
                		<img  
                			v-for="(child,index) in item.maintenanceImg" :src="child"/>
                	</div>
                	<div class="record-box_text">{{item.maintenanceContent}}</div>
                	<div class="record-box_cart">
                		<span>收费合计：<font style="color: #e51c23;">￥{{item.maintenanceFee}}</font></span>
                	</div>
                </li>
               
                <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                
                </div>
                
            </ul>
            
            <div class="notMore" v-else>
            	抱歉！没有养护记录...
            </div>
            <div class="notData" v-if="notMore">我是有底线的</div>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return{
				pageSizeRecord: 0,
				goods: [
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					
				],
				recordList: [],
				busy: false,
				notMore:false
			}
		},
		mounted(){
			this.getRecordsList()
		},
		methods: {
			
			getRecordsList(flag = false) {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/maintenance/record/listbyuser";
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId,
					page: this.pageSizeRecord,
					pageSize: 10
				};
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}

					if(res.data.status != 200) {
						console.log("请求数据错误" + url);
						return;
					}
					if(res.data.status === 200) {
						console.log("维修记录", res.data);
						if(res.data.data.list && res.data.data.list.length>0){
							res.data.data.list.forEach((item, index) => {
			                  item.maintenanceImg ? item.maintenanceImg = item.maintenanceImg.split(',') : ''
			                })
						}
						
						if(flag){
							this.recordList = this.recordList.concat(res.data.data.list)
							if(res.data.data.list.length == 0){
								this.busy = true
								this.notMore = true
							}else{
								this.busy = false
							}
						}else{
							this.recordList = res.data.data.list
							console.log(this.recordList)
							this.busy = false
						}
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			loadMore: function (){
				this.busy = true;
                // 多次加载数据
                console.log(222)
                setTimeout(() => {
                   this.pageSizeRecord ++;
                   this.getRecordsList(true);
                }, 1000);
			}
		},
		
	}
</script>
